<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>N站——个人中心资料设置</title>
    <!-- 标题栏logo -->
    <link rel="icon" href="../../image/nLogo.jpg" type="image/x-icon">
    <!-- 收藏夹里显示的logo -->
    <link rel="shortcut icon" href="../../image/nLogo.jpg" type="image/x-icon">
    <!-- layui样式 -->
    <link href="../../layui/css/layui.css" rel="stylesheet">
    <script src="../../layui/layui.js"></script>
    <script src="../../js/jquery.min.js"></script>
</head>
<body style="background: #F0F0F0;">
<!--导航栏-->
<div class="layui-row layui-panel" style=" background: #222222;">
    <div class="layui-col-md2" style="padding: 10px; text-align: center;">
        <a href="../../index.html" style="color: white; font-weight: bolder; font-size: x-large;">N站</a>
    </div>
    <div class="layui-col-md6" style="padding: 10px; color: white; font-size: x-large;">个人中心</div>
    <ul class="layui-nav layui-col-md2" style=" background: #222222;">
        <li class="layui-nav-item">
            <a><img src="../../image/avatar.jpg" class="layui-nav-img">peng_YuJun</a>
            <dl class="layui-nav-child">
                <dd style="color: white; text-align: center; background: orange">硬币：0</dd>
                <dd><a href="../self/selfData.html">个人中心</a></dd>
                <dd><a href="../publish/publishNews.html">新闻管理</a></dd>
                <dd><a href="../publish/publishRequest.html">申请成为新闻作者</a></dd>
                <dd><a href="#">退出登录</a></dd>
            </dl>
        </li>
    </ul>
    <div class="layui-nav layui-col-md2" style=" background: #222222; display: flex;align-items: center; padding: 10px;">
        <button class="layui-btn layui-btn-sm" lay-event="register">注册</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="login">登录</button>
    </div>
</div>
<div class="layui-row" style="display: flex; margin-top: 10px; height: 90vh;overflow-y: scroll;">
    <!--页面侧栏-->
    <div class="layui-col-md3" style="display: flex; flex-direction: column; align-items: flex-end; margin-right: 10px;">
        <ul class="layui-nav layui-nav-tree" lay-filter="test">
            <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
            <li class="layui-nav-item  layui-this"><a href="./selfData.html">资料设置</a></li>
            <li class="layui-nav-item"><a href="selfCollect.html">我的收藏</a></li>
            <li class="layui-nav-item"><a href="selfCoin.html">我的投币</a></li>
            <li class="layui-nav-item"><a href="selfLike.html">我的点赞</a></li>
            <li class="layui-nav-item"><a href="selfComm.html">我的评论</a></li>
            <li class="layui-nav-item"><a href="selfWatch.html">我的足迹</a></li>
            <li class="layui-nav-item"><a href="selfSubscribe.html">我的订阅</a></li>
            <li class="layui-nav-item"><a href="selfPwd.html">修改密码</a></li>
        </ul>
    </div>
    <!-- 页面主体 -->
    <div class="layui-col-md7">
        <div class="layui-panel"  style="padding: 10px; font-size: larger;">资料修改</div>
        <div class="layui-panel layui-form"  style="padding: 10px;">
            <div>
                <div class="layui-form-label">用户头像：</div>
                <div id="coverLoad" style="overflow: hidden; margin:10px 0; border: 3px dotted gray; display: flex; flex-direction: column; justify-content: center; height: 100px; width: 100px;">
                    <div id="explain" style="text-align: center">
                        <img id="originAvatar" src="../../image/avatar.jpg" style="width: 100%;">
                    </div>
                </div>
                <input id="upload" type="file" accept="image/*" style="display:none;"/>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">名称：</label>
                <div class="layui-input-block">
                    <input type="text" value="peng_YuJun" name="userName" lay-verify="required" placeholder="请输入您的名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">手机号码：</label>
                    <div class="layui-input-inline">
                        <input type="tel" value="10086" name="userPhone" lay-verify="required|phone" placeholder="请输入您的手机号码" autocomplete="off" class="layui-input demo-phone">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">年龄：</label>
                <div class="layui-input-inline">
                    <input type="age" value="21" name="userAge" lay-verify="required|number" placeholder="请输入您的年龄" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">必须为整数</div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">用户简介：   </label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入简介内容" class="layui-textarea" name="userIntro" lay-verify="required">用户简介内容</textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">确定修改</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use(['util', 'layer','form','element'], function(){
        var element = layui.element
            ,util = layui.util
            ,form = layui.form;

        util.event('lay-event',{
            login : function (){
                window.location.href = "../user/userLogin.html";
            },
            register: function (){
                window.location.href = "../user/userRegister.html";
            }
        })

        form.on('submit(formDemo)',
            function (data){
            layer.confirm('是否确定修改个人信息', {
                btn: ['确定','取消'] //按钮
                }, function(){
                    layer.close(layer.index);
                    layer.msg('没有编写进一步的事件', {icon: 3});
                }, function(){
                    layer.close(layer.index);
                    layer.msg('已取消', {icon: 1});
            });
            return false;
        });
    });

    /**
     *鼠标移入上传框的效果
     */
    $('#coverLoad').hover(
        function (){
            $('#coverLoad').css({
                'cursor': 'pointer',
                'background': 'gray',
                'color': 'white'
            })
        },
        function (){
            $('#coverLoad').css({
                'background': '#FFFFFF',
                'color': 'black'
            })
        }
    )
    /**
     * 点击使隐藏的上传按钮被点击
     */
    $('#coverLoad').click(function (){
        $('#upload').click();
    })

</script>
</html>